<template>
	<view class="">
		<!-- <h4 style="margin-left: 15px; width: 200px;">{{ $t('textContent.Parameteradjustment') }}</h4> -->
		<view class="" style="width: 100%; display: flex; ">
			<view class="left" style="width: 55%; display: flex;">

			</view>
			<view class="" style="width: 5%;">

			</view>
			<view class="middle" style="width: 40%;">

				<view class="common">
					<span>{{ $t('textContent.Turnonblackbackground') }}</span>
					<u-switch v-model="isBlack"></u-switch>

					<span>{{ $t('textContent.showLogo') }}</span>
					<u-switch v-model="showLogo"></u-switch>

					<span>{{ $t('textContent.timing') }}</span>
					<view class="container">
						<text class="timer">{{ formatTime }}</text>
						<view class="buttons" style="display: flex;">
							<button @click="startTimer('start')">Start</button>
							<button @click="pauseTimer('stop')">Stop</button>
							<button @click="resetTimer('reset')">Reset</button>
							<button @click="clearTimer('clear')">Clear</button>
						</view>
						<u-alert title="由于信号延迟，平板上和投影上的计时有大约0.02秒之差" type="warning"></u-alert>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
	export default {
		data() {
			return {
				timer: null,
				isBlack: false,
				showLogo: false,
				timingValue: 'clear',
				elapsed: 0, // 以毫秒为单位
			}
		},
		computed: {
			formatTime() {
				const hours = Math.floor(this.elapsed / 3600000);
				const minutes = Math.floor((this.elapsed % 3600000) / 60000);
				const seconds = Math.floor((this.elapsed % 60000) / 1000);
				const milliseconds = Math.floor((this.elapsed % 1000) / 10); // 保留两位毫秒
				return `${this.pad(minutes)}:${this.pad(seconds)}:${this.pad(milliseconds)}`;
			},
		},
		methods: {
			send(is_generating, generate_exit) {
				var sendData = {
					id: 11,
					id_check: 11,
					is_generating: is_generating,
					generate_exit: generate_exit,
					is_black: this.isBlack,
					is_reverse: this.isReverse,
					timing: this.timingValue,
					show_logo: this.showLogo
				}
				this.$emit('send', sendData)
			},
			pad(num) {
				return num < 10 ? '0' + num : num;
			},
			startTimer(timing) {
				this.changeTiming(timing)
				if (this.isRunning) return;
				this.isRunning = true;
				this.timer = setInterval(() => {
					this.elapsed += 10; // 每次增加10毫秒
				}, 10);
			},
			pauseTimer(timing) {
				this.changeTiming(timing)
				this.isRunning = false;
				clearInterval(this.timer);
				this.timer = null;
			},
			async resetTimer(timing) {
				this.changeTiming(timing)
				this.isRunning = false;
				clearInterval(this.timer);
				await sleep(50); // 一行代码暂停 0.5 秒
				this.timer = null;
				this.elapsed = 0;
				// this.startTimer(timing)
			},
			async clearTimer(timing) {
				this.changeTiming(timing)
				clearInterval(this.timer);
				await sleep(50);
				this.isRunning = false;
				this.timer = null;
				this.elapsed = 0;
			},
			changeTiming(timing) {
				this.timingValue = timing
				this.send(true, false)
			},
		},
		watch: {
			double_l(newVal, oldVal) {
				this.send(true, false)
			},
			LineBlack(newVal, oldVal) {
				this.send(true, false)
			},
			isBlack(newVal, oldVal) {
				this.send(true, false)
			},
			shape_generate_X_interval: {
				handler(newVal, oldVal) {
					this.send(true, false)
				},
				deep: true
			},

			random_status(newVal, oldVal) {
				this.send(true, false)
			},
			color(newVal, oldVal) {
				this.send(true, false)
			},
			curveColor(newVal, oldVal) {
				this.send(true, false)
			},
			shapeGeneratorColor(newVal, oldVal) {
				this.send(true, false)
			},
			isReverse(newVal, oldVal) {
				this.send(true, false)
			},
			lrReverse(newVal, oldVal) {
				this.send(true, false)
			},
			isFlipped(newVal, oldVal) {
				this.send(true, false)
			},
			showLogo(newVal, oldVal) {
				this.send(true, false)
			},
			bgDisplay(newVal, oldVal) {
				this.send(true, false)
			},
			showScore(newVal, oldVal) {
				this.send(true, false)
			},
			showArUco(newVal, oldVal) {
				this.send(true, false)
			},
		}
	}
</script>


<style>
</style>